<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body th:style="${'background-color:' + backgroundColor }">
<div style="margin: 30px auto 0 30px;">
    <div id="inputSection">
        <label id="pleas_input_url">请输入网址：</label>
        <input id="inputArea" style="width: 200px;height: 20px;"/>
        <button id="btnStart">开始调用</button>
    </div>
    <div id="resultSection" style="margin-top: 30px; border-top: 1px solid #eaeaea;">
    </div>
</div>

<script charset="utf-8">
    if (navigator.language.includes("en")) {
        $('#pleas_input_url').text('Please enter the URL:');
        $('#btnStart').text('call');
    }
</script>

<script charset="utf-8">
    let isRequesting = true;

    window.addEventListener("keydown", (event) => {
        if (event.key === 'Escape') {
            isRequesting = false;
        }
    });

    $('#btnStart').click(() => {
        const url = $('#inputArea').val();
        $('#resultSection').empty();
        isRequesting = true;
        fetchVal(url);
    });

    const getDateTime = () => {
        const myDate = new Date;
        const year = myDate.getFullYear(); //获取当前年
        const month = myDate.getMonth() + 1; //获取当前月
        const date = myDate.getDate(); //获取当前日
        const hours = myDate.getHours();
        const minutes = myDate.getMinutes();
        const seconds = myDate.getSeconds();
        return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
    };

    const fetchVal = (url) => {
        $.ajax(url, {

            success: (data) => {
                $('#resultSection').append(`<pre>${getDateTime()} 返回 ${data}</pre>`);
                if (isRequesting) {
                    setTimeout(() => {
                        fetchVal(url);
                    }, 500);
                }
            },
            error: (errorThrown) => {
                $('#resultSection').append(`<pre>${getDateTime()} 返回 ${errorThrown.responseText}</pre>`);
                if (isRequesting) {
                    setTimeout(() => {
                        fetchVal(url);
                    }, 500);
                }
            },
        });
    };
</script>
</body>
</html>